// 本文件的内容：创建路由器、路由，并暴露出去

import { createRouter } from "vue-router"       // 创建路由器

import { createWebHistory } from "vue-router"   // 引入路由模式 history
import { createWebHashHistory } from "vue-router"   // 引入路由模式 hash，用法和上面一样

// 引入组件
import Home from '@/pages/Home.vue'
import About from '@/pages/About.vue'
import News from '@/pages/News.vue'
import Detail from '@/pages/Detail.vue'

const router = createRouter({
    history: createWebHistory(),    // vue 3 中必须加入模式设定
    routes:[       // 路由
        {
            name: 'home',
            path: '/home',
            component: Home
        },
        {
            name: 'about',
            path: '/about',
            component: About
        },
        {
            name: 'news',
            path: '/news',
            component: News,
            children:[   // 子路由
                {
                    name: 'detail',
                    // path: 'detail',     // 子级路由不用写路径里的斜杠
                    path: 'detail/:id/:title/:content', // 这是传递 params 参数时的解析法，否则路由器不知道到哪里为止是路径、哪里开始时 params 参数，并且变量名就是设定好的
                    // path: 'detail/:id/:title/:content?'  // 加一个问号就可以让某个参数变成可传可不传
                    component: Detail,

                    // props 的第一种写法：表示将 params 参数收到的这些参数，全部以 props 的形式传递给对应的 component，于是在对应的组件里可以按照接收 props 参数的方式去接受它
                    props: true

                    // props 的第二种写法：函数式写法，可以自己决定将什么作为 props 传给组件
                    // 其接受的参数 route 就是路由信息，route.query 和 route.params
                    // props(route){
                    //     return route.query      // 这么写就可以把 query 参数当做 props 传过去
                    // }

                    // props 的第三种写法：对象式写法。返回一个对象，但是由于对象式写法无法接受参数，只能传递写死的参数，故没什么用
                    // props: {
                    //     a: 100,
                    //     b: 200,
                    //     c: 300
                    // }
                }  
            ]
        }
    ]
})
// 暴露
export default router